<template>
  <div>
    <Header :text="text"/>
    <div class="content">
      <!-- 已配载的专车配载信息 -->
      <div class="csrDetail" v-if="stateArr.includes(record.transportState)">
        <div v-if="record.transportType === '专车运输'">
          <div style="font-size: 15px;font-weight: bold">配载信息</div>
          <div>
            <span>询价单号: {{record.inquiryNum}}</span>
            <span>单证号: {{record.documentNum}}</span>
          </div>
          <div>
            <span>车牌号: {{record.innerCarInfoEntity ? record.innerCarInfoEntity.carNum:''}}</span>
            <span>车型: {{record.innerCarInfoEntity ? record.innerCarInfoEntity.carType:''}}</span>
          </div>
          <div>
            <span>司机姓名: {{record.innerTransportEntity ? record.innerTransportEntity.driverName:''}}</span>
            <span>司机电话: {{record.innerTransportEntity ? record.innerTransportEntity.driverPhone:''}}</span>
          </div>
          <div>
            <span>身份证: {{record.innerTransportEntity ? record.innerTransportEntity.provinceNum:''}}</span>
          </div>
          <div>
            <span>距离: {{record.innerTransportEntity ? record.innerTransportEntity.distance:''}}</span>
          </div>
          <div>
            <span>派车时间: {{record.innerTransportEntity ? record.innerTransportEntity.estimateSendcarsDate : ''}}</span>
          </div>
          <div>
            <span>预计到达时间: {{record.innerTransportEntity ? record.innerTransportEntity.estimateArriveDate : ''}}</span>
          </div>
        </div>
        <div v-else>
          <div style="font-size: 15px;font-weight: bold">配载信息</div>
          <div> <span>运单号: {{record.documentNum}}</span> </div>
          <div> <span>预计到达时间: {{record.innerTransportEntity ? record.innerTransportEntity.actualSendcarsDate:''}}</span> </div>
        </div>
      </div>
      <!-- 已配载的零担配载信息 -->
      <div class="csrDetail" v-if="false">
        <div style="font-size: 15px;font-weight: bold">配载信息</div>
        <div>
          <span>运单号: 1234567899879</span>
        </div>
        <div>
          <span>预计到达时间: 2020-12-15 12:00</span>
        </div>
      </div>
      <!-- 已配载的零担寄件信息 -->
      <div class="car" v-if="record.transportType !== '专车运输'">
        <div style="font-size: 15px;font-weight: bold">寄件信息</div>
        <div class="top-content">
          <div>
            <span>寄件组织部门: {{record.deliveryUnit}}</span>
          </div>
          <div>
            <span>寄件地址: {{record.deliveryAddress}}</span>
          </div>
          <div>
            <span>寄件人姓名: {{record.deliveryPeople}}</span>
          </div>
          <div>
            <span>寄件人电话: {{record.deliveryPhone}} <span v-if="record.senderPhone">| {{record.senderPhone}}</span></span>
          </div>
          <div>
            <span>收件公司名称: {{record.receiveUnit}}</span>
          </div>
          <div>
            <span>收件地址: {{record.receiveAddress}}</span>
          </div>
          <div>
            <span>收件人姓名: {{record.receivePeople}}</span>
          </div>
          <div>
            <span class="last-phone"><div>收件人电话: </div><div>{{record.receivePhone}} {{record.sparePhone ? '| '+record.sparePhone : ''}}</div></span>
          </div>
          <div>
            <span>车型: <span v-if="record.innerCarInfoEntity">{{record.innerCarInfoEntity.carType}}</span></span>
            <span>预估运费: {{record.estimatedFreight}}</span>
          </div>
          <div>
            <span>承运人: {{record.carrier}}</span>
          </div>
          <div>
            <span>提货时间: {{record.innerTransportEntity && record.innerTransportEntity.estimateSendcarsDate ? record.innerTransportEntity.estimateSendcarsDate.substring(0,16):''}}</span>
          </div>
        </div>
      </div>
      <!-- 用车信息 -->
      <div class="car" v-else>
        <div style="font-size: 15px;font-weight: bold">用车信息</div>
        <div class="top-content">
          <div>
            <span>专车申请单位: {{record.applicationUnit}}</span>
          </div>
          <div>
            <span>目的站: {{record.targetStation}}</span>
            <span>始发站: {{record.startStation}}</span>
          </div>
          <div>
            <span>交货单位: {{record.deliveryUnit}}</span>
            <span>交货人: {{record.deliveryPeople}}</span>
          </div>
          <div>
            <span>交货人电话:
              <span>
                <span>{{record.deliveryPhone}}</span> <span v-if="record.senderPhone">| {{record.senderPhone}}</span>
              </span>
            </span>
          </div>
          <div>
            <span>收货单位: {{record.receiveUnit}}</span>
            <span>收货人: {{record.receivePeople}}</span>
          </div>
          <div>
            <span>收货人电话:
              <span>
                <span>{{record.receivePhone}}</span> <span v-if="record.sparePhone">| {{record.sparePhone}}</span>
              </span>
            </span>
          </div>
          <div>
            <span>车型: <span v-if="record.innerCarInfoEntity">{{record.innerCarInfoEntity.carType}}</span></span>
            <span>预估运费: {{record.estimatedFreight}}</span>
          </div>
           <div>
            <span>承运人: {{record.carrier}}</span>
          </div>
          <div>
            <span>预约派车时间: {{record.innerTransportEntity && record.innerTransportEntity.estimateSendcarsDate ? record.innerTransportEntity.estimateSendcarsDate.substring(0,16):''}}</span>
          </div>
        </div>
      </div>
      <el-collapse v-model="activeNames" style="margin-bottom: 50px">
        <el-collapse-item title="货物信息" name="1">
          <div class="box" v-if="record.innerGoodsInfoEntityList && record.innerGoodsInfoEntityList.length !== 0">
            <div class="box-content" v-for="item in record.innerGoodsInfoEntityList" :key="item.id">
              <div class="box-content-text">
                <span>紧急度: <span style="color:red" v-if="item.aog === 1">AOG</span><span v-else>非AOG</span></span>
                <span>新增日期: {{item.addTime.substring(0,11)}}</span>
              </div>
              <div class="box-content-text">
                <span class="partName">货物名称: {{item.itemName}}</span>
                <span>危险品: <span v-if="item.danger === 1">是</span><span v-else>否</span></span>
              </div>
              <div class="box-content-text">
                <span>件号: {{item.partNum}}</span>
                <span>序号: {{item.serialNum}}</span>
              </div>
              <div class="box-content-text">
                <span>发运件数: {{item.number}}</span>
                <span>尺寸: <span v-if="item.itemLength">{{item.itemLength}} * {{item.itemWidth}} * {{item.itemHeight}}{{item.itemLength ? item.measurement:''}}</span></span>
              </div>
              <div class="box-content-text">
                <span>重量: {{item.itemWeight}}{{item.itemWeight ? item.weightUofm:''}}</span>
                <span>包装类型: {{item.packingType}}</span>
              </div>
            </div>
          </div>
          <div class="list" v-if="record.files && record.files.length !== 0">
            <div style="font-size: 15px;font-weight: bold">附件列表</div>
            <div class="link">
              <a v-for="item in record.files" :key="item.id">{{item.fileType}}{{item.suffix}}</a>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 底部按钮未配载 -->
      <div class="bottom_btn" v-if="record.transportState === 2">
        <el-button type="primary" plain @click="handleAdd" >配载</el-button>
      </div>
      <div class="bottom_btn" v-if="record.transportState === 4 || record.transportState === 5 || record.transportState === 6">
        <el-button plain @click="handleEdit">编辑配载信息</el-button>
        <el-button type="primary" plain @click="handleStartCar('提货')" v-if="record.transportState === 4">已 提 货</el-button>
        <el-button type="primary" plain @click="handleStartCar('到达')" v-if="record.transportState === 5">已 到 达</el-button>
        <el-button type="primary" plain @click="handleSign" v-if="record.transportState === 6">签 收</el-button>
      </div>
    </div>
    <!-- 配载 -->
    <AddVehicle
      v-if="isShow"
      :carObj="carObj"
      @handleClose="handleClose"
      @handleAllocate="handleAllocate"
      @handleEdit="handleAllocate"
    />
    <!-- 发车 -->
    <StartCar v-if="isCarShow" :id="record.id" :state="record.transportState" :title="title" @handleClose="handleClose"/>
    <!-- 签收 -->
    <Sign v-if="isSignShow" :record="record" @handleClose="handleClose"/>
  </div>
</template>

<script>
import Header from '../../components/common/Header'
import AddVehicle from "@/components/common/transport/addVehicle"
import StartCar from "@/components/common/transport/StartCar"
import Sign from "@/components/common/transport/Sign"
import { $transManagement } from '@/api/transport'
import { Notify } from 'vant'

export default {
  // 变量
  data() {
    return {
      text: '',
      activeNames: ['1'],
      isShow: false,
      isCarShow: false,
      carObj: {},
      record: {},
      isSignShow: false,
      title: '',
      stateArr: [4,5,6]
    }
  },
  // 使用其他组件
  components: {
    Header,
    AddVehicle,
    StartCar,
    Notify,
    Sign
  },
  // 方法
  methods: {
    handleClose() {
      this.isShow = false
      this.isCarShow = false
      this.carObj = {}
      this.isSignShow = false
    },
    handleAdd() {
      this.isShow = true
    },
    // 发车
    handleStartCar(str) {
      this.isCarShow = true
      this.title = str
    },
    // 编辑配载信息
    handleEdit() {
      this.isShow = true
      const record = this.record
      this.carObj = {
        startTime: record.innerTransportEntity && record.innerTransportEntity.actualSendcarsDate ? record.innerTransportEntity.actualSendcarsDate : '',
        arrive: record.innerTransportEntity && record.innerTransportEntity.estimateArriveDate ? record.innerTransportEntity.estimateArriveDate : '',
        documentNum: record.documentNum,
        carNum: record.innerCarInfoEntity ? record.innerCarInfoEntity.carNum : '',
        actCarType: record.innerCarInfoEntity ? record.innerCarInfoEntity.actCarType : '',
        driverName: record.innerTransportEntity ? record.innerTransportEntity.driverName : '',
        driverPhone: record.innerTransportEntity ? record.innerTransportEntity.driverPhone : '',
        provinceNum: record.innerTransportEntity ? record.innerTransportEntity.provinceNum : '',
        distance: record.distance || ''
      }
    },
    // 新增配载
    handleAllocate(obj) {
      const newObj = JSON.parse(JSON.stringify(obj))
      newObj.state = this.record.state
      newObj.transportApplyId = this.record.id
      newObj.transportType = this.record.transportType
      newObj.transportState = this.record.transportState
      newObj.carId = this.record.carId
      if (this.record.innerCarInfoEntity) {
        newObj.carId = this.record.innerCarInfoEntity.id
      }
      newObj.actualSendcarsDate = newObj.startTime+':00'
      newObj.estimateArriveDate = newObj.arrive+':00'
      delete newObj.startTime
      delete newObj.arrive
      $transManagement
        .vehicleStowage(newObj)
        .then(res => {
          if(res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
          Notify({ type: 'success', message: res.msg || res.message || '配载成功' })
          setTimeout(() => {
            this.$router.go(-1)
          }, 300)
        })
        .catch(err => this.$msg.fail(err.msg || err.message || '出错了'))
    },
    // 签收
    handleSign() {
      this.isSignShow = true
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$route.query.text
    this.record = JSON.parse(sessionStorage.getItem('vehiclesObj'))
  }
}
</script>

<style scoped src="../../assets/css/transport/Vehicles.css">

</style>
